<template>
  <div class="notification-page">
    <div class="view-nav">
      <div class="nav-list w-960">
        <ul>
          <li v-for="item in notifyClassifyOptions" :key="item.key">
            <nuxt-link
              :exact="item.exact"
              :to="item.url">{{ item.name }}
              <em v-if="notifyCount[item.key]">{{ notifyCount[item.key] }}</em>
            </nuxt-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="w-960">
      <nuxt-child></nuxt-child>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { notifyClassifyOptions } from '~/config/optionMap'
export default {
  name: 'NotificationPage',
  layout: 'BaseLayout',
  data () {
    return {
      notifyClassifyOptions
    }
  },

  computed: {
    ...mapState({
      notifyCount: (state) => state.notifyCount
    })
  },

  beforeDestroy () {
    this.getNotifyCount()
  },

  methods: {
    async getNotifyCount () {
      try {
        const { data } = await this.$axios.get('/gimishare/api/v1/messages/count')
        this.$store.commit('UPDATE_NOTIFY_COUNT', data)
      } catch (error) {}
    }
  }
}
</script>

<style scoped lang="less">
.notification-page {
  margin-top: -1px;
  .view-nav {
    height: 52px;
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
    position: sticky;
    top: 60px;
    z-index: 99;
    .nav-list {
      height: 100%;
      ul {
        height: 100%;
        list-style: none;
        display: flex;
        align-items: center;
        padding: 0;
        li {
          margin-right: 30px;
          a {
            color: #71777c;
            position: relative;
            &.nuxt-link-active {
              color: var(--hover-primary-color);
              font-weight: bold;
            }
            em {
              position: absolute;
              font-style: normal;
              background: #de0e19;
              color: #fff;
              font-size: 10px;
              border-radius: 50%;
              top: -10px;
              display: inline-block;
              width: 15px;
              height: 15px;
              line-height: 15px;
              text-align: center;
              right: -12px;
              font-weight: bold;
              padding-left: 1px;
            }
          }
        }
      }
    }
  }
}
</style>
